<template>
  <el-card>
    <template #header>
      <div>
        <el-form ref="searchFomRef" :model="searchForm" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="乘客id">
                <el-input-number v-model="searchForm.passengerId" placeholder="请输入" clearable style="width: 200px"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.name" placeholder="支持模糊搜索" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话号码">
                <el-input v-model="searchForm.phoneNumber" placeholder="支持模糊搜索" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号">
                <el-input v-model="searchForm.idCard" placeholder="支持模糊搜索" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="年龄大于等于">
                <el-input-number v-model="searchForm.ageStart" :min="0" placeholder="请输入"
                  style="width: 200px"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄小于等于">
                <el-input-number v-model="searchForm.ageEnd" :min="0" placeholder="请输入"
                  style="width: 200px"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="绑定的用户id">
                <el-input-number v-model="searchForm.userId" placeholder="请输入" style="width: 200px"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="margin-left: 950px;">
                <el-button type="primary" @click="clearSearchForm">清空</el-button>
                <el-button type="primary" @click="loadDataList">查询</el-button>
                <el-button type="primary" @click="router.push({ name: 'passengerCreateOrUpdate' })">新增</el-button>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
    <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
      <!-- 表单列插槽插入 -->
      <!-- 乘客id -->
      <template #slotPassengerId="{ index, row }">
        {{ row.passengerId }}
      </template>
      <!-- 姓名 -->
      <template #slotName="{index,row}">
        {{ row.name }}
      </template>
      <!-- 电话 -->
      <template #slotPhoneNumber="{ index, row }">
        {{ row.phoneNumber }}
      </template>
      <!-- 身份证号 -->
      <template #slotIdCard="{index,row}">
        {{ row.idCard }}
      </template>
      <!-- 年龄 -->
      <template #slotAge="{index,row}">
        {{ row.age }}
      </template>
      <!-- 绑定的用户id -->
      <template #slotUserId="{index,row}">
        {{ row.userId }}
      </template>
      <!-- 操作 -->
      <template #slotOperation="{index,row}">
        <el-link type="primary" @click="router.push({name:'passengerCreateOrUpdate',query:{row:JSON.stringify(row)}})"
          style="margin-right: 20px">编辑</el-link>
        <el-link type="danger" @click="deletePassenger(row,true)">删除</el-link>
      </template>
    </Table>
  </el-card>
</template>

<script setup>
import { ref, getCurrentInstance,onMounted } from "vue";
import { useRouter } from "vue-router";
import Table from "@/components/Table.vue";

const { proxy } = getCurrentInstance();
// 路由
const router = useRouter();
// 表单
const tableData = ref({});
// 表单样式
const tableOptions = {
    showIndex: true,
    border: true,
};
// 表单列
const columns = [
  {
    label: "乘客id",
    prop: "passengerId",
    width: "200",
    scopedSlots: "slotPassengerId",
    fixed: false
  },
  {
    label: "姓名",
    prop: "name",
    width: "300",
    scopedSlots: "slotName",
    fixed: false
  },
  {
    label: "电话号码",
    prop: "phoneNumber",
    width: "300",
    scopedSlots: "slotPhoneNumber",
    fixed: false
  },
  {
    label: "身份证号",
    prop: "idCard",
    width: "300",
    scopedSlots: "slotIdCard",
    fixed: false
  },
  {
    label: "年龄",
    prop: "age",
    width: "150",
    scopedSlots: "slotAge",
    fixed: false
  },
  {
    label: "绑定的用户id",
    prop: "userId",
    width: "150",
    scopedSlots: "slotUserId",
    fixed: false
  },
  {
    label: "操作",
    width: "200",
    scopedSlots: "slotOperation" ,
    fixed: 'right'   
}
];
// 查询表单
const searchForm = ref({});
/**
 * 获取数据
 */
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  };
  Object.assign(params, searchForm.value);
  let result = await proxy.Request.request({
    url: proxy.Api.loadPassengerList,
    params: params,
  });
  if (!result) {
    return;
  }
  Object.assign(tableData.value, result.data);
};
/**
 * 删除乘客
 */
const deletePassenger = async (row,needConfirm=false)=>{
  if(needConfirm){
    proxy.Confirm({
      message: "确定要删除乘客吗？",
      okfun: ()=>deletePassenger(row,false),
    });
    return;
  }
  let result = await proxy.Request.request({
    url: proxy.Api.deletePassenger,
    params: {
      passengerId: row.passengerId
    }
  });
  if (!result) {
    return;
  }
  proxy.Message.success("删除成功");
  loadDataList();
}
/**
 * 清空查询条件
 */
 const clearSearchForm = () => {
  searchForm.value = {};
}
/**
 * 导出数据
 */
 const exportExcel = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要导出数据吗？",
            okfun: ()=>exportExcel(row,false)
        });
        return;
    }
    const passengerList = (tableData.value.list || []).map((item) => item);
    if (passengerList.length === 0) {
        proxy.Message.warning("当前没有可导出的乘客数据");
        return;
    }
    let result = await proxy.Request.requestJSON({
        url: proxy.Api.exportPassengerExcel,
        params: passengerList, 
        responseType: 'arraybuffer'
    });
    if(!result){
        return;
    }
    let blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });

    const fileName = "乘客数据excel.xlsx";
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        link.style.display = 'none';
        var href = URL.createObjectURL(blob);
        link.href = href;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }
    proxy.Message.success("导出成功");
}
onMounted(()=>{
  loadDataList();
})

</script>

<style scoped>
.el-card {
  width: auto;
}
.el-form{
  .el-form-item{
    width: 300px;
  }
}
</style>
